<template>
  <view class="container">
    <view class="content">
      <!-- <view class="top">
				<text class="h2">宿舍用电量查询</text>
			</view> -->

      <form class="middle">
        <!-- 门牌 -->
        <view class="form">
          <text class="form-field">宿舍门牌:</text>
          <input type="text" :value="data1.SS_MC" name="houseNumber" disabled />
        </view>
        <!-- 用电余量 -->
        <view class="form">
          <text class="form-field">用电余额:</text>
          <input type="text" :value="data1.residue" name="electricityLeft" disabled />
        </view>
        <!-- 补贴电量 -->
        <view class="form">
          <text class="form-field">当月补贴:</text>
          <input type="text" :value="data1.subsidyread" name="subsidyAmount" disabled />
        </view>
        <!-- 电表状态 -->
        <view class="form">
          <text class="form-field">电表状态:</text>
          <input type="text" :value="getStatusText()" name="meterStatus" disabled />
        </view>

        <!-- 充值按钮 -->
        <view>
          <navigator url="/waterElectric/chargeElectric/chargeElectric">
            <button class="btn">充值</button>
          </navigator>
        </view>
        <view>
          <!-- <navigator url="/waterElectric/electricSubsidy/electricSubsidy">
            <button class="btn">补贴领取</button>
          </navigator> -->
        </view>

      </form>

      <!-- 课表时间 -->
      <!-- <view class="readTime">
				<text>采集时间 2024年4月1日</text>
				<text>本系统采集记录存在延迟,具体情况以电表为准。</text>
			</view> -->
    </view>

    <!-- 底部提示 -->
    <view class="bottom">
      <!-- <text>该部分宿舍未支持在线充值</text> -->
      <text class="tishi">仅在12栋展示</text>
    </view>
  </view>
</template>

<script>
  import {
    ajax
  } from "../../utils/request.js";
  export default {
    data() {
      return {
        data1: [],
      };
    },
    onShow() {
      this.fetchFormData();
    },
    methods: {
      fetchFormData() {
        ajax("/api/meter/querymeter", "POST", {
            ss_mc: uni.getStorageSync("userInfo").ss_mc,
            userId: uni.getStorageSync("userId"),
          })
          .then((data) => {
            console.log("成功数据:", data);
            this.data1 = data.data.meter;
            console.log("数据有:", this.data1);
          })
          .catch((error) => {
            console.error("请求失败:", error);
          });
      },
      getStatusText() {
        // console.log("数据是:", this.data1.state)
        if (this.data1.state == 1) {
          return "正常";
        } else if (this.data1.state == 0) {
          return "停用";
        } else {
          return "未知";
        }
      },
      recharge() {
        wx.navigateTo({
          url: "/pages/chargeElectric/chargeElectric",
        });
      },
      getSubsidy() {
        wx.navigateTo({
          url: "/pages/chargeElectric/chargeElectric",
        });
      },
    },
  };
</script>

<style>
  .container {
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom right, #39a755, #2ba245);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    width: 50%;
  }

  .top {
    display: flex;
    justify-content: center;
  }

  .h2 {
    margin: 0;
    font-size: 20px;
    color: #fff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }

  .middle {
    display: flex;
    align-items: center;
    height: 30%;
    flex-direction: row;
    justify-content: center;
  }

  .form-field {
    padding-left: 0.5rem;
    width: 12rem;
    display: flex;
    justify-content: center;
  }

  form input {
    border: none;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }

  .form {
    height: 30px;
    line-height: 30px;
    margin: 10% auto;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
  }

  input:focus {
    outline: none;
  }

  .btn {
    height: 40px;
    background-color: rgba(43, 162, 69, 1.0);
    color: #fff;
    font-size: large;
    box-shadow: none;
    border-color: transparent;
    margin-bottom: 20px;
    /* 阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .readTime {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }

  .readTime text {
    font-size: 18px;
    text-align: center;
  }

  .bottom {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: smaller;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    margin-bottom: 200px;
  }
</style>